<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>物流轨迹</title>
    <style type="text/css">
        body, html {
            background-color: #f4f4f4;
            max-width: 480px;
            min-width: 0;
            margin: 0 auto;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        div{
            box-sizing: border-box;
        }
        .loading {
            text-align: center;
            padding: 50px 0;
            color: #666;
            font-size: 15px;
        }
        .error {
            color: #ff4d4f;
            text-align: center;
            padding: 20px;
            font-size: 15px;
        }
        .fbox{
            position: relative;
        }
        .mapp{
            width: 100%;
            height: 255px;
        }
        .mainbox{
            position: absolute;
            top: 220px;
            background-color: #fff;
            width: 100%;
            border-radius: 20px;
            padding: 10px;
        }
        .mainbox .mbtop img{
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 10px;
            display: inline-block;
            border-radius: 3px;
        }
        .mainbox .mbtop{
            color: #010103;
            font-size: 15px;
            clear: both;
            margin-top: 4px;
        }
        .orderaddr{
            clear: both;
            display: flex;
            align-items: center;
        }
        .orderaddr .img{
            width: 25px;
            height: 25px;
            margin-right: 13px;
            display: inline-block;
        }
        .orderaddr .img img{
            width: 100%;
            height: 100%;
        }
        .orderaddr .cont{
            flex: 1;
            color: #010103;
            font-size: 15px;
            overflow: hidden;
        }
        .cont-two{
            white-space: pre-wrap; 
            overflow: hidden;
            text-overflow: ellipsis; 
        }
        .line{
            border-top: 1px solid #ebebeb;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .wldetail{
            color: #9f9f9f;
            font-size: 15px;
            min-height: 450px;
        }
        .wldetail .item {
            position: relative;
            margin-left: 20px; /* 确保有足够的空间显示线和圆 */
            padding-left: 20px; /* 确保文本不会覆盖到圆 */
            border-left: 1px solid #d4d4d4; /* 左侧的灰色线 */
            padding: 10px 20px;
        }
 
        .wldetail .item:before {
            content: "";
            position: absolute;
            left: -4px; /* 调整圆的位置，‌使其部分位于容器外部 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            width: 8px;
            height: 8px;
            background-color: #d4d4d4;
            border-radius: 50%; /* 圆形 */
            z-index: 1
        }
 
        .wldetail .item:first-child {
            border-left: none;
            color: #3eb32c;
        }
 
        .wldetail .item:first-child:before {
            background-color: green;
            border: 2px solid #8edc84;
        }
 
        .wldetail .item:first-child:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 1px;
            height: 50%;
            background-color: #d4d4d4;
            z-index: 0
        }
        .nodata{
            font-size: 15px;
            color: #9f9f9f;
            text-align: center;
        }
    </style>
</head>
<body> 
    <div id="app">
        <div class="loading" id="loading">加载中...</div>
        <div class="fbox" id="content" style="display:none">
            <div class="mainmap">
                <iframe id="mapFrame" src="" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" class="mapp"></iframe>
            </div>
            <div class="mainbox">
                <div class="mbtop">
                    <img id="expressLogo" src="">
                    <span id="expressInfo"></span>
                </div>
                <div class="line"></div>
                <div class="orderaddr">
                    <div class="img">
                        <img src="//cdn.kuaidi100.com/images/all/express/package.png">
                    </div>
                    <div class="cont">
                        <div id="orderNumber">订单编号：--</div>
                        <div class="cont-two" id="addressInfo">收货地址：--</div>
                    </div>
                </div>
                <div class="line"></div>
                <!-- 物流信息详细 -->
                <div class="wldetail" id="trackList"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 解析URL参数
        function getQueryParams() {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            return {
                com: urlParams.get('com'),
                num: urlParams.get('num'),
                phone: urlParams.get('phone') || '',
                from: urlParams.get('from') || '',
                to: urlParams.get('to') || '',
                orderId: urlParams.get('orderId') || '--',
                address: urlParams.get('address') || '--'
            };
        }

        // 获取物流公司对应的logo
        function getExpressLogo(com) {
            return `//cdn.kuaidi100.com/images/all/56/${com}.png`;
        }

        // 获取物流公司中文名称
        function getExpressName(com) {
            const companies = {
                'zhongtong': '中通快递',
                'yuantong': '圆通速递',
                'shunfeng': '顺丰速运',
                'shentong': '申通快递',
                'yunda': '韵达快递',
                'ems': 'EMS',
                'jd': '京东物流',
                'youzhengguonei': '邮政包裹',
                'youzhengguoji': '国际包裹',
                // 更多快递公司...
            };
            return companies[com] || com;
        }

        // 显示错误信息
        function showError(message) {
            document.getElementById('loading').innerHTML = `<div class="error">${message}</div>`;
        }

        // 查询物流信息
        async function queryLogistics() {
            try {
                const params = getQueryParams();
                
                if (!params.com || !params.num) {
                    showError('缺少必要参数：快递公司编码或快递单号');
                    return;
                }

                // 显示订单信息
                document.getElementById('orderNumber').textContent = `订单编号：${params.orderId}`;
                document.getElementById('addressInfo').textContent = `收货地址：${params.address}`;

                console.log('查询物流信息，参数:', params);

                // 调用后端API查询物流
                const apiUrl = `/api/logistics?com=${encodeURIComponent(params.com)}&num=${encodeURIComponent(params.num)}`;
                const response = await fetch(apiUrl + (params.phone ? `&phone=${encodeURIComponent(params.phone)}` : '') +
                    (params.from ? `&from=${encodeURIComponent(params.from)}` : '') +
                    (params.to ? `&to=${encodeURIComponent(params.to)}` : ''));
                
                const data = await response.json();
                
                console.log('物流查询结果:', data);
                
                if (data.status === '200' || data.status === 200) {
                    renderLogisticsInfo(data, params);
                } else {
                    showError(data.message || '查询物流信息失败');
                }
            } catch (error) {
                console.error('查询物流异常:', error);
                showError('查询物流信息出错，请稍后再试');
            }
        }

        // 渲染物流信息
        function renderLogisticsInfo(data, params) {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('content').style.display = 'block';
            
            // 设置快递公司logo和信息
            document.getElementById('expressLogo').src = getExpressLogo(data.com || params.com);
            document.getElementById('expressInfo').textContent = `${getExpressName(data.com || params.com)}：${data.nu || params.num}`;
            
            // 设置地图iframe
            if (data.trailUrl) {
                document.getElementById('mapFrame').src = data.trailUrl;
            } else {
                // 如果没有地图URL，显示提示
                document.getElementById('mapFrame').style.display = 'none';
            }
            
            // 渲染物流轨迹列表
            const trackList = document.getElementById('trackList');
            trackList.innerHTML = '';
            
            if (data.data && data.data.length > 0) {
                data.data.forEach(item => {
                    const trackItem = document.createElement('div');
                    trackItem.className = 'item';
                    
                    const textDiv = document.createElement('div');
                    textDiv.className = 'text';
                    textDiv.textContent = item.context;
                    
                    const timeDiv = document.createElement('div');
                    timeDiv.className = 'ctime';
                    timeDiv.textContent = item.time || item.ftime;
                    
                    trackItem.appendChild(textDiv);
                    trackItem.appendChild(timeDiv);
                    trackList.appendChild(trackItem);
                });
            } else {
                trackList.innerHTML = '<div class="nodata">暂无物流信息</div>';
            }
        }

        // 通知小程序页面已加载完成
        function notifyMiniProgram() {
            // 检测是否在小程序环境
            if (window.wx && window.wx.miniProgram) {
                window.wx.miniProgram.postMessage({
                    data: { loaded: true }
                });
            }
        }

        // 页面加载完成后执行查询
        window.onload = function() {
            queryLogistics();
            notifyMiniProgram();
        };
    </script>
</body>
</html> 